<template>
    <div>
        <el-row>
            <el-col :span="8">
                <el-card shadow="hover" class="header_card">
                    <div class="center">
                        <el-col :span="8">
                            <el-button class="btn_jump" type="text">
                                <span style="color: #009DDA;" class="header_num">{{this.dataList.askAll}}</span>
                            </el-button>
                            <br>
                            <span>当前提问总数</span>
                            <br>
                        </el-col>
                        <el-col :span="1">
                            <el-divider direction="vertical"></el-divider>
                            <el-divider direction="vertical"></el-divider>
                        </el-col>
                        <el-col :span="5">
                            <el-button class="btn_jump" type="text" >
                                <span style="color: #8F2139;" class="header_num">{{this.dataList.agree}}</span>
                            </el-button>
                            <br>
                            <span>已采纳</span>
                        </el-col>
                        <el-col :span="5">
                            <el-button class="btn_jump" type="text">
                                <span style="color: #D8262A;" class="header_num">{{this.dataList.noPraise}}</span>
                            </el-button>
                            <br>
                            <span>零赞数</span>
                        </el-col>
                        <el-col :span="5">
                            <el-button class="btn_jump" type="text">
                                <span style="color: #FF9900;" class="header_num">{{this.dataList.avgPraise}}</span>
                            </el-button>
                            <br>
                            <span>均赞数</span>
                        </el-col>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4" :offset="1">
                <el-card shadow="always" class="header_card">
                    <div class="center">
                        <el-button class="btn_jump" type="text">
                            <span style="color: #D8262A;" class="header_num">{{this.dataList.TaskAll}}</span>
                        </el-button>
                        <br>
                        <span>今日提问总数</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4" :offset="1">
                <el-card shadow="always" class="header_card">
                    <div class="center">
                        <el-button class="btn_jump" type="text" >
                            <span style="color: #0073FF;" class="header_num">{{this.dataList.TPraise}}</span>
                        </el-button>
                        <br>
                        <span>点赞总数</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4" :offset="1">
                <el-card shadow="always" class="header_card">
                    <div class="center">
                        <el-button class="btn_jump" type="text" >
                            <span style="color: #ff9900" class="header_num">{{this.dataList.Tagree}}</span>
                        </el-button>
                        <br>
                        <span>今日采纳数</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row style="margin-top: 4vh">
            <el-col :span="8">
                <el-card shadow="hover" class="header_card">
                    <div class="center">
                        <el-col :span="8">
                            <el-button class="btn_jump" type="text">
                                <span style="color: #009DDA;" class="header_num">{{this.AdataList.answerAll}}</span>
                            </el-button>
                            <br>
                            <span>当前回答总数</span>
                            <br>
                        </el-col>
                        <el-col :span="1">
                            <el-divider direction="vertical"></el-divider>
                            <el-divider direction="vertical"></el-divider>
                        </el-col>
                        <el-col :span="7">
                            <el-button class="btn_jump" type="text">
                                <span style="color: #D8262A;" class="header_num">{{this.AdataList.noPraise}}</span>
                            </el-button>
                            <br>
                            <span>零赞数</span>
                        </el-col>
                        <el-col :span="7">
                            <el-button class="btn_jump" type="text">
                                <span style="color: #FF9900;" class="header_num">{{this.AdataList.avgPraise}}</span>
                            </el-button>
                            <br>
                            <span>均赞数</span>
                        </el-col>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="7" :offset="1">
                <el-card shadow="always" class="header_card">
                    <div class="center">
                        <el-button class="btn_jump" type="text">
                            <span style="color: #D8262A;" class="header_num">{{this.AdataList.TanswerAll}}</span>
                        </el-button>
                        <br>
                        <span>今日回答总数</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="7" :offset="1">
                <el-card shadow="always" class="header_card">
                    <div class="center">
                        <el-button class="btn_jump" type="text" >
                            <span style="color: #0073FF;" class="header_num">{{this.AdataList.TPraise}}</span>
                        </el-button>
                        <br>
                        <span>点赞总数</span>
                    </div>
                </el-card>
            </el-col>

        </el-row>

        <el-row style="margin-top: 4vh">
            <el-card style="position:relative;">
                <div class="pic_box">
                    <img src="../../assets/img/4.jpg" class="pic" alt="">
                </div>
                <div>
                    <el-row :span="12">
                        <span><i class="el-icon-star-on"></i>本月点赞最多的问题:</span>
                        <span style="color: #8F2139">
                            <b> {{this.goodAsk[0].title}}</b>
                        </span>
                    </el-row>
                    <p>
                        <span>该提问者为：</span>
                        <span style="color: #0a3d62">
                            <b>{{this.goodAsk[0].username}}</b>
                        </span>
                        <span style="margin-left: 30px">点赞数：</span>
                        <span style="color: #ea8685">
                            <b>{{this.goodAsk[0].praise}}</b>
                        </span>
                    </p>
                    <p>
                        <span>内容为：</span>
                        <span style="color: #0a3d62">
                            <b>{{this.goodAsk[0].content}}</b>
                        </span>
                    </p>
                </div>
            </el-card>
        </el-row>
        <el-row style="margin-top: 4vh">
            <el-card class="body_num">
                <div class="main_body">
                    <el-row>
                        <el-col :span="8">
                            <span class="main_title"><i class="el-icon-share"></i>最佳问题</span>
                        </el-col>
                    </el-row>
                    <div class="chart" v-loading="loading1"
                         element-loading-text="拼命加载中"
                         element-loading-spinner="el-icon-loading">
                        <div id="newAsk" style="margin-top:5px;margin-left:10%;width:100%;height:95%;"></div>
                    </div>
                </div>
            </el-card>

        </el-row>

    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "Static",
        data(){
            return{
                loading:true,
                loading1:true,
                Askchart:'',
                flag:false,
                dataList:[],
                goodAsk:[
                    {
                        title:'',
                        praise:'',
                        username:'',
                        id:''
                    }
                ],
                AdataList:[],
                answerList:[]
            }
        },
        mounted() {
            this.init()
        },
        created() {
            this.getDataCount()
            this.getGoodAsk()
            this.getDataList()
        },
        methods:{
            // 初始化
            init(){
                var chartDom = document.getElementById('newAsk');
                this.Askchart = echarts.init(chartDom);
                this.flag = true
            },
            async getDataCount(){
                this.loading=true
                const { data: res } = await this.$http.get('/ask/all/'+ 'today')
                console.log(res.data)
                if (res.code !== 200) {
                    this.loading = false
                    return this.WarningMsg(res.msg)
                }
                this.dataList = res.data
                this.loading = false
            },
            async getDataList(){
                this.loading=true
                const { data: res } = await this.$http.get('/answer/all/'+ 'today')
                console.log(res.data)
                if (res.code !== 200) {
                    this.loading = false
                    return this.WarningMsg(res.msg)
                }
                this.AdataList = res.data
                this.loading = false
            },
            async getGoodAsk(){
                this.loading =true
                const { data: res } = await this.$http.get('/ask/count/'+ 'ask')
                console.log(res.data)
                if (res.code !== 200) {
                    this.loading = false
                    return this.WarningMsg(res.msg)
                }
                this.goodAsk = res.data
                this.getAnswer()
                this.loading = false
            },
            async getAnswer(){
                this.loading = true
                const { data: res } = await this.$http.get('/ask/findAnswerById/' + this.goodAsk[0].id)
                console.log(res)
                if(res.code !== 200){
                    this.loading = false
                    this.WarningMsg(res.msg)
                }
                this.answerList = res.data.answer
                console.log(res.data.answer)
                this.DrawAnswer(res.data.answer)
                if (this.flag) {
                    this.loading1 = false
                }
                this.loading = false
            },
            DrawAnswer(list){
                var myChart = this.Askchart
                var Option;
                var answerTime = [];
                var answerPraise = [];
                var answerId = [];
                list.forEach(function (item) {
                    answerPraise.push(item.praise)
                    answerId.push(item.id)
                    answerTime.push(item.createTime)
                })

                var emphasisStyle = {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0,0,0,0.3)'
                    }
                };

                Option = {
                    legend: {
                        data: ['评论',  '点赞'],
                        left: '10%'
                    },
                    // brush: {
                    //     toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
                    //     xAxisIndex: 0
                    // },
                    toolbox: {
                        feature: {
                            magicType: {
                                type: ['stack', 'tiled']
                            },
                            dataView: {}
                        }
                    },
                    tooltip: {},
                    xAxis: {
                        data: answerTime,
                        name: '回答',
                        axisLine: {onZero: true},
                        splitLine: {show: false},
                        splitArea: {show: false}
                    },
                    yAxis: {},
                    grid: {
                        bottom: 30
                    },
                    series: [
                        {
                            name: '点赞',
                            type: 'bar',
                            stack: 'one',
                            emphasis: emphasisStyle,
                            data: answerPraise
                        },
                        {
                            name: '评论',
                            type: 'bar',
                            stack: 'one',
                            emphasis: emphasisStyle,
                            data: answerId
                        }
                    ]
                };

                myChart.setOption(Option);
            },
            WarningMsg(msg) {
                const h = this.$createElement;
                this.$notify.warning({
                    title: '提示',
                    message: h('p', {style: 'color: teal'}, msg),
                    offset: 100,
                    duration: 3000
                });
            },
        }
    }
</script>

<style scoped>
    .btn_jump{
        padding: 0;
        margin: 0;
        /*height: auto;*/
    }
    .center{
        text-align: center;
        align-self: center;
        justify-content: center;
        /*display: flex;*/
    }
    .header_card{
        /*margin-top: -5px;*/
        border-radius: 8px;
        height: 90px;
    }
    .header_num{
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
    }

    .pic_box{
        position: absolute;
        top: 5px;
        left: 1%;
    }
    .pic{
        opacity: 0.6;
        width: 80px;
        height: 80px;
    }
    .chart{
        margin: auto;
        height: 28vh;
        display: flex;
        justify-content: center;
    }

    .main_title{
        font-size: 12px;
        font-weight: bold;
        color: #000000;
        float: left;
    }
</style>
